<html>
<head>

  <!-- Editor CSS -->
  {% for css in editor_css %}
    <link href="{{ css }}" rel="stylesheet">
  {% endfor %}

  <!-- Editor JS -->
  {% for js in editor_js %}
    <script src="{{ js }}"></script>
  {% endfor %}

  <style>
    body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(178, 178, 178, 0.3) !important;
      background-color: #F5F5F5 !important;
    }

    body::-webkit-scrollbar {
      width: 2px !important;
      height: 2px !important;
      background-color: #F5F5F5 !important;
    }

    body::-webkit-scrollbar-thumb {
      background-color: #c3c3c3 !important;
      border: 2px solid #b4b4b4 !important;
    }

    #label-studio div[class^="App_editor"],
    div[class*="App_editor"] {
      width: 98% !important;
      min-width: 98% !important;
      max-width: 98% !important;
    }
  </style>

</head>
<body>

<script src="static/js/jquery.min.js"></script>
<script src="static/js/lsb.js"></script>

<!-- Editor -->
<div class="ui content">
  <div id="label-studio" style="width: 100%;">
    <div class="ui loader active inline centered"></div>
  </div>
</div>

<script>
  window.onload = function () {
    var task = {{ task_ser | json | safe }};

    var LS = new LabelStudio("label-studio", {
      config: `{{ label_config_line | safe }}`,
      user: {pk: 1, firstName: "Awesome", lastName: "User"},

      task: _convertTask(task),

      interfaces: [
        "basic",
        // "side-column"
      ],

      onLabelStudioLoad: function (LS) {
        var c = LS.completionStore.addCompletion({userGenerate: true});
        LS.completionStore.selectCompletion(c.id);
      }
    });
  };
</script>

</body>
</html>